<template>
  <div class="ask">
    <div class="banner container-fuild text-center">交流问答</div>
    <div class="container middle">
      <el-form :inline="true" :model="formInline" class="form-inline">
        <el-form-item class="form-left">
          <el-input v-model="formInline.user" placeholder="请输入债权名称、欠债金额等"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">我要发布</el-button>
        </el-form-item>
      </el-form>
      <div v-for="(it, idx) in messageList" :key="it.id" class="normal-item" :class="{'item-one' : !idx}" @click="viewDetail(it.id)">
        <div class="line-one">
          <span>{{it.question}}</span>
          <span @click="viewDetail(it.id)" class="view-btn">查看详情</span>
        </div>
        <div class="line-two">
          <span>等{{it.people.length}}人参与讨论 | {{it.updateTime}} | {{it.belong}}</span>
        </div>
      </div>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="90">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { WOW } from 'wowjs';
export default {
  name: "Ask",
  data() {
    return {
      formInline: {
        user: ''
      },
      messageList:[{
        question: '建筑物区分所有权相邻关系纠纷的诉讼流程是什么？',
        people:[
          'jack','rose','mark'
        ],
        updateTime: '2021年8月30日',
        belong: '交流问答',
        id: '1234'
      },{
        question: '行政案件如何执行？',
        people:[
          'jack','rose','mark'
        ],
        updateTime: '2021年8月28日',
        belong: '交流问答',
        id: '12345'
      },{
        question: '行政案件如何执行？',
        people:[
          'jack','rose','mark'
        ],
        updateTime: '2021年9月1日',
        belong: '交流问答',
        id: '12334'
      },{
        question: '行政案件如何执行？',
        people:[
          'jack','rose','mark'
        ],
        updateTime: '2021年9月2日',
        belong: '交流问答',
        id: '12234'
      },{
        question: '行政案件如何执行？',
        people:[
          'jack','rose','mark'
        ],
        updateTime: '2021年9月2日',
        belong: '交流问答',
        id: '12354'
      },{
        question: '行政案件如何执行？',
        people:[
          'jack','rose','mark'
        ],
        updateTime: '2021年9月2日',
        belong: '交流问答',
        id: '12434'
      },{
        question: '行政案件如何执行？',
        people:[
          'jack','rose','mark'
        ],
        updateTime: '2021年9月2日',
        belong: '交流问答',
        id: '12634'
      },{
        question: '行政案件如何执行？',
        people:[
          'jack','rose','mark'
        ],
        updateTime: '2021年9月2日',
        belong: '交流问答',
        id: '12314'
      },{
        question: '行政案件如何执行？',
        people:[
          'jack','rose','mark'
        ],
        updateTime: '2021年9月2日',
        belong: '交流问答',
        id: '13234'
      },{
        question: '行政案件如何执行？',
        people:[
          'jack','rose','mark'
        ],
        updateTime: '2021年9月2日',
        belong: '交流问答',
        id: '11234'
      }],
    };
  },
  mounted(){
    var wow = new WOW();
    wow.init();
    this.getDataList()
  },
  methods: {
    onSubmit(){

    },
    viewDetail(id) {
      this.$router.push({path: `askDetail/${id}`})
    },
    getDataList(){
      let obj= Object.assign({userId:'', userType:''})
      this.$http.post('api/question/getQuestionList',obj).then(res=>{
        console.log(data)
      })
    }
  }
};
</script>
<style scoped>
.banner {
  color: #fff;
  font-size: 30px;
  height: 300px;
  line-height: 300px;
  background-image: url("../assets/img/banner_2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-position: center center;
}
.middle {
  margin: 40px auto;
}

.middle .el-form {
  display: flex;
  justify-content: space-between;
}
.form-left {
  flex: 1;
}

/deep/ .el-form-item__content {
  width: 100%;
}
.view-btn {
  cursor: pointer;
}
.middle .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.middle .title .line {
  content: '-';
  width: calc(100% - 160px);
  height: 1px;
  background: #ccc;
}
.normal-item {
  border: 2px solid #CADEF5;
  border-radius: 4px;
  padding: 20px 10px;
  margin-top: 30px;
}
.item-one {
  color: #fff;
  background: #3B8FEE;
}
.line-one {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #CADEF5;
  padding-bottom: 20px;
}
.line-two {
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
}
.el-pagination {
  text-align: center;
  margin-top: 40px;
}
@media screen and (max-width: 997px) {
  .ask-container {
    margin: 20px 0;
    padding: 20px;
    border: 1px dashed salmon;
  }
}
</style>

